<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link rel="stylesheet" th:href="@{/lib/layui/layui.css}">
    <link rel="stylesheet" th:href="@{/css/admin-style.css}">

</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo"></div>
        <ul class="layui-nav layui-layout-left">

        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">

            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <div  th:include="admin/include-admin-slide::html"></div>
        </div>
    </div>

    <div class="layui-body">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>发布教程</legend>
        </fieldset>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">教程标题</label>
                    <div class="layui-input-inline">
                        <input id="title" type="text" name="courseTitle" lay-verify="title" autocomplete="off" placeholder="请输入导航名称"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-inline">
                        <input id="describe" type="text" name="describe" lay-verify="title" autocomplete="off" placeholder="请输入导航名称"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-inline">
                        <input id="type" type="text" name="describe" lay-verify="title" autocomplete="off" placeholder="请输入导航名称"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">tag</label>
                    <div class="layui-input-inline">
                        <input id="tags" type="text" name="describe" lay-verify="title" autocomplete="off" placeholder="请输入导航名称"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">发布人</label>
                    <div class="layui-input-inline">
                        <input id="pushName" type="text" name="pushName" lay-verify="title" autocomplete="off" placeholder="发布人"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">封面</label>
                    <div class="layui-input-inline">
                        <button type="button" class="layui-btn" id="coverImage">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                        <img id="coverPreview" src="">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">视频</label>
                    <div class="layui-input-inline">
                        <button type="button" class="layui-btn" id="videoBtn">
                            <i class="layui-icon">&#xe655;</i>上传视频
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-form-item " >
                <div class="layui-input-block">
                    <button  id="pushBtn" onclick="" type="submit" class="layui-btn" lay-submit="" lay-filter="pushBtn">发布</button>
                </div>
            </div>

    </div>

    <div class="layui-footer">
    </div>
</div>
<script th:src="@{/lib/layui/layui.js}"></script>
<script th:src="@{/lib/jquery/jquery-1.7.2.min.js}"></script>
<script>
    var formData ={}
    layui.use('element', function(){
        var element = layui.element;

    });
    layui.use('layer', function(){

    });
    layui.use('upload', function () {
        var upload = layui.upload;

        var uploadInst = upload.render({
            elem: "#coverImage",
            url: "api/course/courseUpload",
            accept:"image",
            acceptMime:"image/*'",
            auto:false,
            bindAction:"#pushBtn",
            field:"mCover",
            data:formData,
            choose:(res)=>{
                res.preview(function(index, file, result){
                    $("#coverPreview").attr("src",result)
                });
            },
            done: function (res)
            {
                layer.closeAll();
            },before: function(obj){
                formData.courseTitle=$("#title").val()
                formData.courseDescribe=$("#describe").val()
                formData.pushName=$("#pushName").val()
                formData.courseTag=$("#tags").val()
                formData.courseType=$("#type").val()
                layer.open({
                    type: 3,
                });
            },
            error: function ()
            {
                layer.closeAll();
            }
        })
         upload.render({
            elem: "#videoBtn",
            accept:"video",
            auto:false,
            choose:(res)=>{
                res.preview(function(index, file, result){
                    formData.mVideo=file
                });
            }
        })
    })


</script>
</body>
</html>